<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Upload } from '@element-plus/icons-vue'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { AuthStore } from '@/stores/modules/auth'

const authStore = AuthStore()

const options = reactive<{
  [key: string]: {
    value: string | number
    label: string
    type: string
  }[]
}>({
  enabledOptions: [
    {
      value: 1,
      label: '启用',
      type: 'success',
    },
    {
      value: 0,
      label: '停用',
      type: 'warning',
    },
    {
      value: 2,
      label: '锁定',
      type: 'warning',
    },
  ],
  sexOptions: [
    {
      value: 1,
      label: '男',
      type: 'success',
    },
    {
      value: 2,
      label: '女',
      type: 'success',
    },
  ],
})
const ruleFormRef = ref<FormInstance>()
// do not use same name with ref
const formData = ref<{
  [key: string]: unknown
}>({
  ...authStore.user,
  // password: "123456",
})
const saveLoading = ref(false)

const formRules = reactive<FormRules>({
  nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
})
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      saveLoading.value = true
      console.log(formData.value)

      setTimeout(() => {
        saveLoading.value = false
      }, 1000)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const fileList = ref<UploadUserFile[]>([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`,
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
  return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
    () => true,
    () => false,
  )
}
</script>

<template>
  <div class="base-settings-container-left">
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="formRules"
      label-position="top"
      label-width="120px"
    >
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formData.nickname" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio v-for="s in options.sexOptions" :key="s.value" :value="s.value">{{
            s.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="个人简介" prop="profile">
        <el-input v-model="formData.profile" type="textarea" :rows="4" resize="none" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="formData.phone" disabled />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" disabled />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="saveLoading" @click="onSubmit(ruleFormRef)"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div class="base-settings-container-right">
    <el-form :model="formData" label-position="top" label-width="120px">
      <el-form-item label="头像">
        <el-avatar :size="144" :src="formData.avatar" />
      </el-form-item>
      <el-form-item>
        <div style="width: 144px; text-align: center">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
            :show-file-list="false"
          >
            <el-button type="primary">
              <span>更换头像</span>
              <el-icon class="el-icon--right">
                <Upload />
              </el-icon>
            </el-button>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.base-settings-container-left {
  min-width: 424px;
  max-width: 648px;
}

.base-settings-container-right {
  flex: 1 1;
  padding-left: 104px;
}
</style>
